<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>8数码问题求解工具 - 界面原型图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", Arial, sans-serif;
        }

        body {
            background: #f5f7fa;
            color: #303133;
            font-size: 12px;
        }

        .main-container {
            width: 1200px;
            height: 800px;
            margin: 0 auto;
            background: #f5f7fa;
            position: relative;
        }

        .header {
            height: 50px;
            background: #ffffff;
            border: 1px solid #dcdfe6;
            border-radius: 6px;
            margin: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            font-weight: bold;
            color: #303133;
        }

        .content {
            display: flex;
            height: 720px;
            margin: 0 10px;
            gap: 20px;
        }

        .left-panel {
            width: 580px;
            background: #ffffff;
            border: 1px solid #dcdfe6;
            border-radius: 6px;
            padding: 20px;
        }

        .right-panel {
            width: 560px;
            background: #ffffff;
            border: 1px solid #dcdfe6;
            border-radius: 6px;
            padding: 20px;
        }

        .section {
            background: #ffffff;
            border: 1px solid #e4e7ed;
            border-radius: 6px;
            margin-bottom: 20px;
            padding: 15px;
        }

        .section-title {
            font-size: 14px;
            font-weight: 600;
            color: #606266;
            margin-bottom: 15px;
            padding-bottom: 8px;
            border-bottom: 1px solid #ebeef5;
        }

        .puzzle-size {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 15px;
        }

        .puzzle-size select {
            height: 28px;
            padding: 0 8px;
            background: #ffffff;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            width: 120px;
        }

        .states-container {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
        }

        .state-box {
            flex: 1;
            background: #ffffff;
            border: 1px solid #dcdfe6;
            border-radius: 6px;
            padding: 10px;
            text-align: center;
        }

        .state-title {
            font-size: 12px;
            font-weight: 600;
            color: #606266;
            margin-bottom: 10px;
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(3, 35px);
            grid-template-rows: repeat(3, 35px);
            gap: 2px;
            justify-content: center;
            margin: 10px 0;
        }

        .grid-cell {
            width: 35px;
            height: 35px;
            background: #f5f7fa;
            border: 1px solid #dcdfe6;
            border-radius: 3px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 14px;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .grid-cell:hover {
            background: #ecf5ff;
        }

        .grid-cell.empty {
            background: #ffffff;
        }

        .grid-cell.current {
            background: #ecf5ff;
            border-color: #409EFF;
        }

        .button-group {
            display: flex;
            gap: 10px;
            margin-top: 15px;
        }

        .btn {
            height: 32px;
            padding: 0 14px;
            border: 1px solid #dcdfe6;
            border-radius: 6px;
            background: #ffffff;
            color: #303133;
            cursor: pointer;
            font-size: 12px;
            transition: all 0.2s;
        }

        .btn:hover {
            background: #f2f6fc;
        }

        .btn.primary {
            background: #409EFF;
            color: #ffffff;
            border-color: #409EFF;
        }

        .btn.primary:hover {
            background: #66b1ff;
        }

        .control-buttons {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }

        .speed-control {
            margin: 15px 0;
        }

        .speed-slider {
            width: 200px;
            height: 20px;
            background: #f5f7fa;
            border: 1px solid #dcdfe6;
            border-radius: 10px;
            position: relative;
            margin: 10px 0;
        }

        .speed-handle {
            width: 16px;
            height: 16px;
            background: #409EFF;
            border-radius: 50%;
            position: absolute;
            top: 2px;
            left: 100px;
            cursor: pointer;
        }

        .data-display {
            background: #f9fafc;
            border: 1px solid #ebeef5;
            border-radius: 4px;
            padding: 10px;
            margin: 10px 0;
            height: 80px;
            overflow-y: auto;
            font-size: 10px;
            color: #909399;
        }

        .algorithm-list {
            margin-bottom: 20px;
        }

        .algorithm-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 0;
            border-bottom: 1px solid #f0f0f0;
        }

        .algorithm-name {
            color: #409EFF;
            font-weight: 500;
        }

        .demo-btn {
            width: 60px;
            height: 28px;
            font-size: 12px;
        }

        .results-table {
            width: 100%;
            border-collapse: collapse;
            background: #ffffff;
            margin: 15px 0;
        }

        .results-table th {
            background: #f2f6fc;
            padding: 8px;
            border: 1px solid #dcdfe6;
            color: #606266;
            font-size: 11px;
            text-align: center;
        }

        .results-table td {
            padding: 6px 8px;
            border: 1px solid #ebeef5;
            text-align: center;
            font-size: 11px;
        }

        .results-table tr:nth-child(even) {
            background: #f9fafc;
        }

        .success {
            color: #67C23A;
            font-weight: 500;
        }

        .log-area {
            background: #f9fafc;
            border: 1px solid #ebeef5;
            border-radius: 4px;
            padding: 10px;
            height: 70px;
            overflow-y: auto;
            font-size: 10px;
            color: #909399;
        }

        .interactive {
            cursor: pointer;
            transition: all 0.2s;
        }

        .interactive:hover {
            transform: scale(1.02);
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .status-indicator {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 5px;
        }

        .status-running {
            background: #E6A23C;
            animation: pulse 1s infinite;
        }

        .status-success {
            background: #67C23A;
        }

        .status-idle {
            background: #909399;
        }

        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.5; }
            100% { opacity: 1; }
        }

        .tooltip {
            position: relative;
        }

        .tooltip:hover::after {
            content: attr(data-tooltip);
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: #303133;
            color: #ffffff;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 10px;
            white-space: nowrap;
            z-index: 1000;
        }
    </style>
</head>
<body>
    <div class="main-container">
        <div class="header">
            8数码问题求解工具 - 界面原型图
        </div>
        
        <div class="content">
            <!-- 左侧控制面板 -->
            <div class="left-panel">
                <div class="section-title">左侧控制面板</div>
                
                <!-- 数码状态区域 -->
                <div class="section">
                    <div class="section-title">数码状态</div>
                    
                    <div class="puzzle-size">
                        <label>数码大小:</label>
                        <select id="puzzleSize">
                            <option value="3">3x3 (8数码)</option>
                            <option value="4">4x4 (15数码)</option>
                        </select>
                    </div>
                    
                    <div class="states-container">
                        <div class="state-box">
                            <div class="state-title">初始状态</div>
                            <div class="grid" id="initialGrid">
                                <div class="grid-cell">2</div>
                                <div class="grid-cell">8</div>
                                <div class="grid-cell">3</div>
                                <div class="grid-cell">1</div>
                                <div class="grid-cell">6</div>
                                <div class="grid-cell">4</div>
                                <div class="grid-cell">7</div>
                                <div class="grid-cell empty"></div>
                                <div class="grid-cell">5</div>
                            </div>
                        </div>
                        
                        <div class="state-box">
                            <div class="state-title">目标状态</div>
                            <div class="grid" id="goalGrid">
                                <div class="grid-cell">1</div>
                                <div class="grid-cell">2</div>
                                <div class="grid-cell">3</div>
                                <div class="grid-cell">8</div>
                                <div class="grid-cell empty"></div>
                                <div class="grid-cell">4</div>
                                <div class="grid-cell">7</div>
                                <div class="grid-cell">6</div>
                                <div class="grid-cell">5</div>
                            </div>
                        </div>
                        
                        <div class="state-box">
                            <div class="state-title">过程演示</div>
                            <div class="grid" id="currentGrid">
                                <div class="grid-cell current">2</div>
                                <div class="grid-cell">8</div>
                                <div class="grid-cell">3</div>
                                <div class="grid-cell empty"></div>
                                <div class="grid-cell">1</div>
                                <div class="grid-cell">4</div>
                                <div class="grid-cell">7</div>
                                <div class="grid-cell">6</div>
                                <div class="grid-cell">5</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="button-group">
                        <button class="btn interactive" onclick="resetDefault()">恢复默认状态</button>
                        <button class="btn interactive" onclick="generateRandom()">随机生成状态</button>
                        <button class="btn interactive" onclick="manualEdit()">手动设置状态</button>
                    </div>
                </div>
                
                <!-- 搜索控制区域 -->
                <div class="section">
                    <div class="section-title">搜索控制</div>
                    
                    <div class="control-buttons">
                        <button class="btn primary interactive" onclick="runAllAlgorithms()">
                            <span class="status-indicator status-idle"></span>运行所有算法
                        </button>
                        <button class="btn interactive" onclick="startDemo()">开始演示</button>
                        <button class="btn interactive" onclick="pauseDemo()">暂停</button>
                        <button class="btn interactive" onclick="resetDemo()">重置</button>
                    </div>
                    
                    <div class="speed-control">
                        <label>演示速度:</label>
                        <div class="speed-slider">
                            <div class="speed-handle" id="speedHandle"></div>
                        </div>
                    </div>
                    
                    <div>
                        <label>OPEN表 (待扩展节点):</label>
                        <div class="data-display" id="openList">
                            节点1: [2,8,3,1,6,4,7,0,5] f=8<br>
                            节点2: [2,8,3,1,0,4,7,6,5] f=9<br>
                            节点3: [2,0,3,1,8,4,7,6,5] f=10
                        </div>
                    </div>
                    
                    <div>
                        <label>CLOSE表 (已扩展节点):</label>
                        <div class="data-display" id="closeList">
                            节点0: [2,8,3,1,6,4,7,0,5] (初始状态)<br>
                            节点1: [2,8,3,1,6,4,7,5,0]<br>
                            节点2: [2,8,3,1,6,4,0,7,5]
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 右侧结果面板 -->
            <div class="right-panel">
                <div class="section-title">右侧结果面板</div>
                
                <!-- 算法选择区域 -->
                <div class="section algorithm-list">
                    <div class="section-title">支持的算法</div>
                    
                    <div class="algorithm-item">
                        <span class="algorithm-name">• A* (曼哈顿距离)</span>
                        <button class="btn demo-btn interactive tooltip" data-tooltip="演示A*算法" onclick="demoAlgorithm('astar-manhattan')">演示</button>
                    </div>
                    
                    <div class="algorithm-item">
                        <span class="algorithm-name">• A* (不在位数码数)</span>
                        <button class="btn demo-btn interactive tooltip" data-tooltip="演示A*算法" onclick="demoAlgorithm('astar-misplaced')">演示</button>
                    </div>
                    
                    <div class="algorithm-item">
                        <span class="algorithm-name">• 宽度优先搜索 (BFS)</span>
                        <button class="btn demo-btn interactive tooltip" data-tooltip="演示BFS算法" onclick="demoAlgorithm('bfs')">演示</button>
                    </div>
                    
                    <div class="algorithm-item">
                        <span class="algorithm-name">• IDA* (深度优先+启发式指导)</span>
                        <button class="btn demo-btn interactive tooltip" data-tooltip="演示IDA*算法" onclick="demoAlgorithm('ida-star')">演示</button>
                    </div>
                </div>
                
                <!-- 搜索结果表格 -->
                <div class="section">
                    <div class="section-title">搜索结果</div>
                    
                    <table class="results-table">
                        <thead>
                            <tr>
                                <th>算法</th>
                                <th>是否成功</th>
                                <th>步数</th>
                                <th>时间(ms)</th>
                                <th>生成节点数</th>
                                <th>扩展节点数</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>A*(曼哈顿)</td>
                                <td class="success">成功</td>
                                <td>22</td>
                                <td>15</td>
                                <td>45</td>
                                <td>23</td>
                            </tr>
                            <tr>
                                <td>A*(不在位)</td>
                                <td class="success">成功</td>
                                <td>22</td>
                                <td>18</td>
                                <td>52</td>
                                <td>23</td>
                            </tr>
                            <tr>
                                <td>BFS</td>
                                <td class="success">成功</td>
                                <td>22</td>
                                <td>125</td>
                                <td>1024</td>
                                <td>512</td>
                            </tr>
                            <tr>
                                <td>IDA*</td>
                                <td class="success">成功</td>
                                <td>22</td>
                                <td>32</td>
                                <td>89</td>
                                <td>45</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
                <!-- 演示日志区域 -->
                <div class="section">
                    <div class="section-title">演示日志</div>
                    <div class="log-area" id="logArea">
                        [A*算法] 开始搜索...<br>
                        [A*算法] 扩展节点: [2,8,3,1,6,4,7,0,5] f=8<br>
                        [A*算法] 生成后继节点: 3个<br>
                        [A*算法] 当前OPEN表大小: 4
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 模拟交互功能
        let isRunning = false;
        let currentAlgorithm = null;

        function resetDefault() {
            showMessage('恢复默认状态');
            // 重置网格到默认状态
        }

        function generateRandom() {
            showMessage('随机生成状态');
            // 生成随机状态
        }

        function manualEdit() {
            showMessage('进入手动编辑模式');
            // 启用网格编辑
        }

        function runAllAlgorithms() {
            if (isRunning) return;
            
            isRunning = true;
            const indicator = document.querySelector('.status-indicator');
            indicator.className = 'status-indicator status-running';
            
            showMessage('开始运行所有算法...');
            
            // 模拟算法执行
            setTimeout(() => {
                isRunning = false;
                indicator.className = 'status-indicator status-success';
                showMessage('所有算法执行完成');
            }, 3000);
        }

        function startDemo() {
            showMessage('开始演示');
        }

        function pauseDemo() {
            showMessage('暂停演示');
        }

        function resetDemo() {
            showMessage('重置演示');
        }

        function demoAlgorithm(algorithm) {
            currentAlgorithm = algorithm;
            showMessage(`开始演示 ${algorithm} 算法`);
            
            // 模拟算法演示过程
            simulateAlgorithmDemo(algorithm);
        }

        function simulateAlgorithmDemo(algorithm) {
            const logArea = document.getElementById('logArea');
            const messages = [
                `[${algorithm}] 算法开始执行...`,
                `[${algorithm}] 初始化OPEN表和CLOSE表`,
                `[${algorithm}] 扩展当前节点`,
                `[${algorithm}] 生成后继节点`,
                `[${algorithm}] 计算启发式值`,
                `[${algorithm}] 更新OPEN表`,
                `[${algorithm}] 算法执行完成`
            ];
            
            let index = 0;
            const interval = setInterval(() => {
                if (index < messages.length) {
                    logArea.innerHTML += messages[index] + '<br>';
                    logArea.scrollTop = logArea.scrollHeight;
                    index++;
                } else {
                    clearInterval(interval);
                }
            }, 500);
        }

        function showMessage(message) {
            const logArea = document.getElementById('logArea');
            logArea.innerHTML += `[系统] ${message}<br>`;
            logArea.scrollTop = logArea.scrollHeight;
        }

        // 网格点击事件
        document.querySelectorAll('.grid-cell').forEach(cell => {
            cell.addEventListener('click', function() {
                if (this.classList.contains('empty')) {
                    showMessage('点击了空格位置');
                } else {
                    showMessage(`点击了数字 ${this.textContent}`);
                }
            });
        });

        // 速度滑块拖拽
        let isDragging = false;
        const speedHandle = document.getElementById('speedHandle');
        const speedSlider = speedHandle.parentElement;

        speedHandle.addEventListener('mousedown', function(e) {
            isDragging = true;
            e.preventDefault();
        });

        document.addEventListener('mousemove', function(e) {
            if (isDragging) {
                const rect = speedSlider.getBoundingClientRect();
                let x = e.clientX - rect.left - 8;
                x = Math.max(0, Math.min(x, rect.width - 16));
                speedHandle.style.left = x + 'px';
                
                const speed = Math.round((x / (rect.width - 16)) * 10) + 1;
                showMessage(`演示速度设置为: ${speed} 步/秒`);
            }
        });

        document.addEventListener('mouseup', function() {
            isDragging = false;
        });

        // 初始化消息
        showMessage('界面原型图加载完成，可以进行交互测试');
    </script>
</body>
</html>